<%@page pageEncoding="UTF-8" isELIgnored="false" contentType="text/html; UTF-8" %>

<script>
    $(function () {
        $.post("${pageContext.request.contextPath}/role/findAllRole", (result) => {
            //创建标签列表
            createProductList("#tagList", result.roles);
        }, "JSON");

        $.post("${pageContext.request.contextPath}/privilege/findAllPrivilege", (result) => {
            $.each(result.privileges, function (i, p) {
                $("#addPrivilegs").append("<label><input type='checkbox' value='" + p.id + "' name='privilegeName' title='" + p.privilegeName + "'>&nbsp;" + p.privilegeName + "&nbsp;&nbsp;</label>")
            })
        }, "JSON");

        $("#add").click(function () {
            let ids = [];
            $("input:checkbox:checked").each(function (i) {
                ids[i] = $(this).val();
            });
            $.ajax({
                url: "${pageContext.request.contextPath}/role/addRole",
                data: {"roleName": $("#roleName").val(), "ids": ids},
                type: 'post',
                traditional: true,
                success: function (result) {
                    //查询所有标签数据
                    $.post("${pageContext.request.contextPath}/role/findAllRole", (result) => {
                        //创建标签列表
                        createProductList("#tagList", result.roles);
                    }, "JSON");
                }
            });
        });

    });

    $(document).on('close.bs.alert', '.alert', function () {
        var id = $($(this).children().get(0)).val();
        $.ajax({
            url: '${pageContext.request.contextPath}/role/delRole',
            dataType: 'JSON',
            data: {
                'id': id
            },
            type: 'POST',
            success: function (data) {
                $.post("${pageContext.request.contextPath}/role/findAllRole", (result) => {
                    //创建角色列表
                    createProductList("#tagList", result.roles);
                }, "JSON");
            }
        });
    });

    //创建角色列表复用函数
    function createProductList(selector, result) {
        $(selector).empty();//清空内容
        $.each(result, (i, tag) => {
            $(selector).append('<div class="col-sm-2" style="padding-left:0px;">' +
                '<div class="alert alert-info alert-dismissible myAlert" role="alert">' +
                '<input type="hidden" value="' + tag.id + '"> ' +
                '<button type="button" class="close myclick" data-dismiss="alert" aria-label="Close"><span class="myclick" aria-hidden="true">&times;</span></button>' +
                '<a href="#" onclick="roleModalShow(' + JSON.stringify(tag).replace(/"/g, '&quot;') + ')">' + tag.roleName + '</a>' +
                '</div>' +
                '</div>');

        })
    }

    //角色详情模态框展示
    function roleModalShow(role) {
        $('#roleName_modal').val(role.roleName);
        $.each(role.privileges, function (i, privilege) {
            $('#rolePrivilege').append("<option value='" + privilege.id + "'>" + privilege.privilegeName + "</option>");
        });

        $('#roleModal').modal('show');
    }
</script>
<div class="col-sm-10">
    <div class="row">
        <!--使用pageheader完成水平线-->
        <div class="page-header">
            <h2>角色管理</h2>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-6">
            <input type="text" class="form-control" id="roleName" name="roleName" placeholder="请输入要添加的角色名称">
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-12" id="addPrivilegs">
            <span>给角色添加权限：</span>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2">
            <button type="button" class="btn btn-default" id="add">添加</button>
        </div>
    </div>
    <hr/>
    <br/>
    <div class="row" id="tagList">


    </div>
</div>